昨天我們建立了一個 React 專案，也成功看到了，React 的 Logo 在畫面上的樣子，接下來我們就要來看他是怎麼呈現的，並且用 React 在畫面上印出 Hello, world
開啟專案後可以看到 src/index.js，以及 public/index.html 檔案
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 這裡的 root 就是，`index.html` 中的 <div id="root"></div>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//這裡會將我們要的 Component 放到 <div id="root"></div> 中
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<!-- 這裡的 root 就是 React 專案的進入點 -->
</div>
</body>
</html>
其中會發現 <APP /> 這個很像 HTML 的標籤，但他其實是 JSX 語法，明天我們將會詳細說明什麼是 JSX ，
那這個 <APP /> 是怎麼來的呢？
再往上面幾行看，可以看到 import App from './App'; 他是從 './App' 被引入進來的
這時我們就去找到 src/App.js 這個檔案，會看到
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
這裡就是昨天我們看到 React Logo 呈現的地方，
知道了這件事情後，那就不免俗的用 React 在網頁上呈現 Hello, World 吧
將 src/App.js 改成這樣
function App() {
return (
<div>
<h1>Hello, World</h1>
</div>
);
}
export default App;
然後在終端機執行npm start，就可以看到 Hello, World
注意：現在開始要進入撰寫程式碼的章節了，所以你必須擁有基礎的 HTML、CSS、JavaScript 知識
今天成功用 React 在網頁上呈現出 Hello, World ，明天會針對 JSX 語法做進一步的說明。
iThome鐵人賽
看影片追技術